<template>
    <rx-dialog @handOk="okFun" @cancel="cancel" :showok="showOkBtn">
        <div slot="toolbar">
            <a-button @click="handleUpload" type="primary" v-if="!showResult" :disabled="!enableUpload || btnLoading">
                <a-icon type="loading" v-if="btnLoading"/>
                {{ $ti18('rxList.importBtn', '导入') }}
            </a-button>
            <a-button @click="okFun" type="primary" v-if="showResult">{{ $ti18('rxForm.okBtn', '确定') }}</a-button>
        </div>
        <rx-layout>
            <div slot="center">
                <div class="header-title">

                    <div class="excel">{{i18n('import.userImport','用户管理导入')}}</div>
                </div>
                <div style="padding: 0px 79px 20px 79px">
                    <a-checkbox style="margin-top: 10px;" @click="selectOverride($event)" :defaultChecked="false" >
                        <span style="font-weight: bold">{{i18n('import.theSameOverwrite','账号相同则覆盖')}}</span></a-checkbox>
                    <div class="excel-excel">
                        {{i18n('import.firstStep','第一步')}}:{{i18n('import.templateDownload','模板下载：')}}
                    </div>
                    <a class="excel-excel-a" :href="docPath +'osUserTemplate.xlsx'"
                       :download="i18n('import.osUserTemplate','用户导入模板').xlsx">
                        <i class="iconfont iconcloud-download xzicon" style="margin-right: 10px"></i>{{ i18n('import.osUserTemplate', '用户导入模板') }}.xlsx</a>
                    <div class="excel-excel">
                        {{i18n('import.TheStep','第二步')}}:{{i18n('import.selectFile','选择文件') }}
                    </div>
                    <div>
                        <div v-if="fileList.length" class="file-list-box">
                            <span class="xlsx"><i class="iconfont iconliebiaozujian fileicon"></i>{{fileList[0].name}}</span>
                            <span class="cxxz" @click="removeFile">{{i18n('import.delBtn','删除')}}</span>
                        </div>
                        <a-upload
                           v-else
                            class="excel-upload"
                            accept=".xls,.xlsx"
                            :multiple="false"
                            :file-list="fileList"
                            :showUploadList="false"
                            :before-upload="beforeFileUpload"
                            :remove="removeFile"
                        >
                            <a-button style="border:1px solid #1890ff;color:#1890ff!important;" class="excel-excel-a">
                                <a-icon type="folder-open"/>
                                {{$ti18('rxList.select','选择')}}
                            </a-button>
                        </a-upload>
                    </div>
                    <a-alert style="margin-top: 20px" v-if="showResult && fileList.length" :message="result" type="success" show-icon />
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import {BaseForm, RxDialog, Util} from "@lowcode/jpaas-common-lib";
import OsUserApi from "@/api/user/org/osUser";

export default {
    name: 'OsImport',
    mixins: [BaseForm],
    components: {
        RxDialog
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        callback: {
            type: Function
        }
    },
    data() {
        return {
            isSpinning: false,
            step: 1,
            fileName:'',
            fileList: [],
            file: {},
            showOkBtn: false,
            override: false,
            docPath: process.env.VUE_APP_ADMIN_FRONT + "/doc/",
            //允许上传
            enableUpload: false,
            //显示结果
            showResult: false,
            //导入结果
            result: "",
            btnLoading:false
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "osUser", key);
        },
        removeFile(info) {
            this.fileList.splice(0, 1);
            this.file = {};
        },
        selectOverride() {
            let chk = false;
            if (event) {
                chk = event.target.checked;
            }
            this.override = chk;
        },
        beforeFileUpload(file) {
            if (!file || !file.type) {
                this.$confirm({
                    title: this.$ti18('rxMsa.masWarn.delInfo', '警告'),
                    zIndex: 20000,
                    content: this.i18n('import.excelError', 'Excel导入格式错误！'),
                    okText: this.$ti18('rxForm.ackBtn', '确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                });
                return false;
            }

            this.enableUpload = true;
            this.file = file;
            this.fileList.push({
                uid: file.uid,
                name: file.name,
                status: 'done',
                url: null
            });
            //限制只能上传一个文件
            this.fileList = this.fileList.slice(-1);
            return false;
        },
        async uploadFile(formData) {
            let self = this;
            this.isSpinning = true;
            await OsUserApi.importData(formData).then(res => {
                self.btnLoading = false;
                self.isSpinning = false;
                //关闭弹窗
                //关闭弹窗
                self.enableUpload = false;

                self.showResult = true;

                self.result = res.message;
            });
        },
        handleUpload() {
            if(this.btnLoading){ return }
            this.btnLoading = true ;
            if (this.fileList.length === 0) {
                this.$confirm({
                    title: this.$ti18('rxMsa.masWarn.delInfo', '警告'),
                    zIndex: 20000,
                    content: this.i18n('import.excelError', 'Excel导入格式错误！'),
                    okText: this.$ti18('rxForm.ackBtn', '确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                });
                return;
            }
            const formData = new FormData();
            formData.append("override", Util.encryptWord(this.override, true));
            let timestamp = new Date().getTime();
            formData.append("time", Util.encryptWord(timestamp, true));
            formData.append('file', this.file);
            this.uploadFile(formData);
        },
        okFun() {
            Util.closeWindow(this, "ok");
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    },
    watch: {
        fileList: {
            handler: function (val, oldVal) {
                if (val.length == 0) {
                    this.enableUpload = false;
                }
            },
            deep: true
        }
    }

}
</script>
<style scoped>
.fileicon {
    font-size: 25px;
    color: #29bc90;
    margin-right: 8px;
    vertical-align: middle;
}
.file-list-box {
    margin-top: 10px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}
.xlsx {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 1px;
    color: #555555;
}
.cxxz {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #4285f4;
    cursor: pointer;
}
.upicon {
    font-size: 41px;
    color: #4285f4;
}
.header-title {
    text-align: center;
}
.excel {
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 41px;
    letter-spacing: 1px;
    color: #333333;
}
.excel-excel{
    margin-top: 10px;
}
.excel-excel-a{
    height: 32px;
    width: 100%;
    display: block;
    line-height: 32px;
    border-radius: 5px;
    border: 1px solid #e9e9e9;
    text-align: center;
    margin-top: 10px;
    color: #333333;
}
.excel-upload{
    width: 100%;
}
.excel-upload>>>.ant-upload.ant-upload-select{
    width: 100%;
}
</style>